<template>
  <el-dialog v-loading="loading" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="员工请假申请详情" width="860px" top="3vh" @close="closeDlg">
    <table class="billinfo-table" width="100%">
      <tr>
        <td colspan="2"><div class="bill-item"><label>申请标题</label><p>{{ entity.applyName }}</p></div></td>
      </tr>
      <tr>
        <td width="50%"><div class="bill-item"><label>申请人</label><p>{{ entity.applicantName }}</p></div></td>
        <td width="50%"><div class="bill-item"><label>申请时间</label><p>{{ entity.applyTime | parseTime("{y}-{m}-{d}") }}</p></div></td>
      </tr>
      <tr>
        <td colspan="2"><div class="bill-item"><label>请假类型</label><p>{{ entity.typeName }}</p></div></td>
      </tr>
      <tr>
        <td colspan="2"><div class="bill-item"><label>请假原因</label><p>{{ entity.reason }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>开始时间</label><p>{{ entity.startTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</p></div></td>
        <td><div class="bill-item"><label>结束时间</label><p>{{ entity.endTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>请假天数</label><p>{{ entity.totalDays }}</p></div></td>
      </tr>

      <tr class="approve-tr">
        <td colspan="2"><div class="bill-item"><label>状态</label><p>{{ entity.statusName }}</p></div></td>
      </tr>
      <tr class="approve-tr">
        <td colspan="2">
          <div class="approve-msg-box">
            <label>审批过程：</label>
            <div v-for="(po) in approveComments" :key="po.id" class="approve-msg-item">
              <p>审批意见：{{ po.message }}</p>
              <p style="text-align-right">审批人：{{ po.userName }} <span style="margin-left:12px;">{{ po.createTime| parseTime("{y}-{m}-{d} {h}:{i}") }}</span></p>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'LeaveShow',
  data() {
    return {
      loading: false,
      visable: false,
      entity: {
        id: null,
        name: '',
        className: '',
        reason: '',
        startTime: '',
        endTime: '',
        totalDays: ''
      },
      approveComments: []
    }
  },
  methods: {
    cancel() {
      this.closeDlg()
    },
    show(id) {
      request({ url: '/edu/leave/' + id, method: 'get' }).then(data => {
        this.entity = data

        this.visable = true
      }).catch(err => {
        this.$message.error(err.message)
      })
      // history comment
      request({ url: '/edu/leave/findCommentsById', method: 'get', params: { id: id }}).then(data => {
        this.approveComments = data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    closeDlg() {
      this.approveComments = []
      this.visable = false
    }
  }
}
</script>
